 /*
 * @Author: tanggan
 * 字体组件
 * @param {*} type为蓝色或红色 {red||blue}
 * @param {*} textStyle标签字体的样式
 * @param {*} wrapperStyle标签字体外框的样式
 */

import React from 'react';
import { Text, View } from 'react-native';
import PropTypes from 'prop-types';
import { Rem } from '../utils/view';
import { colors } from '../styles/basic';

const cirColor = {
    'red': colors.Red,
    'blue': colors.Blue
}

class CircleTag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        circle: { }
    };
  }

  static propTypes = {
    number: PropTypes.number.isRequired,
    type: PropTypes.oneOf(['red','blue']),
    checked: PropTypes.bool
  }

  static defaultProps = {
    type: 'red',
    checked: false
  }

  componentDidMount(){
    const { checked, type } = this.props;
    const mainColor = cirColor[type];
    let newCircle = {
        viewStyle: {
            width: Rem(78),
            height: Rem(78),
            borderWidth: Rem(4),
            borderColor: mainColor,
            borderRadius: Rem(39),
            flexDirection: 'row',
            flexWrap: 'wrap',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: checked ? mainColor : 'transparent',
        },
        textStyle: {
            flex: 1,
            fontSize: Rem(36),
            color: checked ? colors.White : mainColor,
            textAlign: 'center'
        }
    };
    this.setState({
        circle: {
            ...newCircle
        }
    })
  }

  render() {
    const { number } = this.props;
    const { circle } = this.state;
    return <View style={circle.viewStyle}>
       <Text style={circle.textStyle}>{number}</Text>
    </View>
  }

}

export default CircleTag;